<style lang="scss" scoped>
.xjw-select {
  display: flex;
  height: 100%;
  flex-direction: column;
  .xjw-select_head {
    display: flex;
    justify-content: space-between;
    padding: 16upx 32upx;
  }
  .picker-view {
    flex: 1;
    .picker-view_column {
      //  height: 100%;
      .picker-view_item {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        color: $f303133;
        padding: 0 8upx;
      }
    }
  }
}
</style>
<template>
  <xjw-popup
    v-model="value"
    width="100%"
    mode="bottom"
    height="600"
    @open="open"
    @close="close"
    :duration="duration"
    :is-popup="false"
    :user-style="borderStyle"
  >
    <view class="xjw-select">
      <view class="xjw-select_head">
        <xjw-button type="text" color="strong" @click="close">关闭</xjw-button>
        <xjw-button type="text" color="base" @click="getResult"
          >确定</xjw-button
        >
      </view>
      <!--
:indicator-style="indicatorStyle"
 -->
      <picker-view
        :value="selectData.defaultValue"
        @change="bindChange"
        class="picker-view"
        @pickstart="pickstart"
        @pickend="pickend"
      >
        <picker-view-column
          class="picker-view_column"
          v-for="(item, index) in selectData.columnList"
          :key="index"
        >
          <view
            class="picker-view_item"
            v-for="(item1, index1) in item"
            :key="index1"
            >{{ item1[labelName] }}</view
          >
        </picker-view-column>
      </picker-view>
    </view>
  </xjw-popup>
</template>

<script lang="ts">
import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
import xjwPopup from "../xjw-popup/index.vue";
import popMixin from "../xjw-popup/popMixin";
import xjwButton from "../xjw-button/index.vue";
import { PropType } from "vue";

type TMode = "single" | "mutil";

interface TSelectData {
  moving: Boolean;
  defaultValue: Array<number>;
  columnList: Array<Array<any>>;
  selectValue: Array<number>;
}

function initData(): TSelectData {
  return {
    moving: false,
    defaultValue: [],
    columnList: [],
    selectValue: [],
  };
}

@Component({
  components: {
    xjwPopup,
    xjwButton,
  },
})
export default class Index extends Mixins(popMixin) {
  @Prop({ type: Array, default: [] }) valueList;
  @Prop({ type: Array, default: [0] }) checkValue;
  @Prop({ type: String, default: "label" }) labelName; //自定义labelNmae
  @Prop({ type: String, default: "value" }) valueName; //自定义value
  @Prop({ type: String as PropType<TMode>, default: "single" }) mode; //单列 single 多 mutil

  selectData = initData();

  created() {
    this.borderStyle.borderRadius = `0 0 0 0`;
  }

  @Watch("value", {
    immediate: true,
  })
  init(value) {
    if (value) {
      this.initialize();
      this.$nextTick(() => {
        this.initColumnList();
        this.initPickerValue();
      });
    }
  }

  initialize() {
    Object.assign(this.selectData, initData());
  }
  /**
   * @example: 根据传入的对象找到对应数组的下标 让picker-view 选中
   */
  initPickerValue() {
    const resultList: Array<any> = [];
    if (!this.checkValue.length) {
      this.selectData.columnList.forEach(() => {
        resultList.push(0);
      });
    } else {
      this.selectData.columnList.forEach((v, inx) => {
        if (!this.checkValue[inx]) {
          return resultList.push(0);
        }
        v.forEach((element, index) => {
          if (this.checkValue[inx]) {
            if (
              element[this.valueName] === this.checkValue[inx][this.valueName]
            ) {
              resultList.push(index);
            }
          }
        });
      });
    }
    this.selectData.defaultValue = resultList;
  }

  /**
   * @example: 初始化列
   */
  initColumnList() {
    if (this.mode === "single") {
      this.selectData.columnList.push(this.valueList);
    } else if (this.mode === "mutil") {
      this.valueList.forEach((item, index) => {
        this.selectData.columnList.push(item);
      });
    }
  }

  pickstart() {
    // #ifdef MP-WEIXIN
    this.selectData.moving = true;
    // #endif
  }

  pickend() {
    // #ifdef MP-WEIXIN
    this.selectData.moving = false;
    // #endif
  }

  /**
   * @example: 根据选中的下标获取对应的数据
   */
  getSelectValue() {
    const length = this.selectData.columnList.length;
    const resultList: Array<any> = [];
    for (let i = 0; i < length; i++) {
      resultList.push(
        this.selectData.columnList[i][this.selectData.selectValue[i]]
      );
    }
    return resultList;
  }

  getResult() {
    // #ifdef MP-WEIXIN
    if (this.selectData.moving) return;
    // #endif
    this.$emit("change", this.getSelectValue());
    this.close();
  }

  /**
   * @example: picker-view 选中change事件
   */
  bindChange(value) {
    this.selectData.selectValue = value.detail.value;
  }
}
</script>
